<template>
  <div class="details">
    <!-- 头部导航 -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-popover
          v-model:show="showPopover"
          theme="dark"
          placement="bottom-end"
        >
          <template #default>
            <ul class="popover">
              <li
                v-for="item in actions"
                :key="item"
                @click="$router.push(item.to)"
              >
                <van-icon :name="item.icon" />
                {{ item.text }}
              </li>
            </ul>
          </template>
          <template #reference>
            <van-icon name="weapp-nav" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in bannerListArr" :key="item.bannerid">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="title">
      <span>￥{{ data.originprice }}</span>
      <p>
        {{ data.proname }}
        <span>自营</span>
      </p>
    </div>
    <!-- 底部导航 -->
    <van-action-bar route>
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="cartListLength"
        to="/cart"
      />
      <van-action-bar-button
        type="warning"
        @click="addCart"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import Banner from "../components/Swiper.vue";
import { detail } from "../server/detail.js";
import { addCartList, getCarList } from "../server/cart.js";

export default {
  data() {
    return {
      bannerList: [],
      cartList: [],
      data: {},
      badge: "",
      actions: [
        { text: "首页", to: "/home", icon: "wap-home-o" },
        { text: "购物车", to: "/cart", icon: "shopping-cart-o" },
        { text: "分享", to: "/details", icon: "share" },
      ],
      showPopover: false,
    };
  },
  computed: {
    bannerListArr() {
      return this.bannerList.map((item) => ({ img: item }));
    },
    cartListLength() {
      return this.cartList.length;
    },
  },
  components: {
    Banner,
  },
  methods: {
    addCart() {
      addCartList({
        userid: this.$store.state.userid,
        proid: this.data.proid,
        num: "1",
      }).then((res) => {
        this.getList();
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      console.log("更多");
    },
    getList() {
      getCarList({ userid: this.$store.state.userid }).then((res) => {
        if (res.code === "200") {
          this.cartList = res.data;
          this.$store.commit("setCartLength", res.data ? res.data.length : 0);
        }
      });
    },
  },
  created() {
    this.getList();
    detail(this.$route.query.id).then((res) => {
      this.bannerList = res.data.banners[0].split(",");
      this.data = res.data;
    });
  },
};
</script>

<style scoped>
.details {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background-color: rgb(246, 246, 246);
}
.van-swipe {
  width: 100%;
}
.my-swipe .van-swipe-item {
  height: 23.4375rem;
  font-size: 1.25rem;
  line-height: 23.4375rem;
  text-align: center;
  margin: 0.625rem 0;
}
.my-swipe .van-swipe-item > img {
  height: 100%;
}
.title {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title > span {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  color: #ee0a24;
}
.title > p {
  margin: 0.625rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375rem;
  position: relative;
  padding: 0 0.9375rem;
  box-sizing: border-box;
  text-indent: 38px;
}
.title > p > span {
  display: block;
  position: absolute;
  left: 0.625rem;
  top: 0;
  width: 2.25rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  text-indent: 0;
  background-color: #ee0a24;
  color: #fff;
  font-size: 0.75rem;
}
.popover {
  width: 6.25rem;
  padding: 0.3125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 6.25rem;
}
.popover > li {
  width: 100%;
  flex: 1;
}
.popover > li > i {
  margin: 0 0.625rem;
}
</style>
